<template>
    <div class="departManagement">
        <el-row>
            <div class="content_left">
                <div class="grid-content bg-purple-dark" id="grid-content">
                    <el-scrollbar wrap-class="side-bar-scrollbar-wrap">
                        <depart-show
                            :departList="departList"
                            @getDepartInfo="getDepartInfo"
                            @handleNodeClick="handleNodeClick"
                        ></depart-show>
                    </el-scrollbar>
                </div>
            </div>
            <div class="content_right">
                <div class="grid-content bg-purple" id="auth-content">
                    <depart-child-info :userInfo="userInfo"></depart-child-info>
                </div>
            </div>
        </el-row>
    </div>
</template>

<script>
import departChildInfo from './departChilder/departChildInfo.vue';
import departShow from './departChilder/departShow.vue';

export default {
    name: 'departManagement',
    components: {
        departChildInfo,
        departShow,
    },
    data() {
        return {
            departList: [],
            userInfo: {},
        };
    },
    created() {
        this.getDepartInfo();
    },
    methods: {
        getDepartInfo() {
            const param = {};
            this.$post.departManage.searchByDept(param).then((res) => {
                if (res.data.success) {
                    this.departList = res.data.content;
                }
            }, (err) => {
                this.$message.error(err);
            });
        },
        handleNodeClick(data) {
            this.userInfo = data;
        },
    },
};
</script>
<style lang="scss">
.departManagement {
    .bg-purple-dark {
        .el-scrollbar__wrap {
            border-radius: 4px;
            .el-tree {
                .el-tree-node__content {
                    .menuIcon {
                        right: 0%;
                        i {
                            line-height: 18px;
                            margin-right: 2px;
                        }
                    }
                }
            }
        }
    }
}
</style>

<style  lang="scss" scoped>
.departManagement {
    padding: 20px 10px;
    background: #fff;
    .content_left {
        float: left;
        margin-right: 15px;
        width: 16%;
    }
    .content_right {
        float: left;
        width: 82%;
    }
    /deep/.el-tree {
        background: transparent;
    }
    /deep/ .side-bar-scrollbar-wrap,
    /deep/.el-scrollbar__view {
        min-height: 600px;
    }
}
.bg-purple-dark {
    background: #f5f7fa;
    // border-radius: 5px;
}
/* #grid-content /deep/ .side-bar-scrollbar-wrap,
#auth-content /deep/ .side-bar-scrollbar-wrap {
    max-height: 700px;
    min-height: 700px;
} */
</style>
